<template>
    <div>
        <el-table :data="students" style="width: 100%">
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="gender" label="性别"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        size="small"
                        @click="handleUpdate(scope.row._id)"
                        >修改</el-button
                    >
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[5,10,15,20,25]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
        >
        </el-pagination>
    </div>
</template>

<script>
import {getById} from '../../../services/student';
export default {
    props: ["students","pagination"],
    methods: {
        async handleUpdate(id) {
            console.log(id);
            let {data} = await getById(id);
            this.$emit("setStudent",data);
            this.$emit("setUpdateVisible",true);
            console.log(data);
        },
        handleSizeChange(pageSize){
            this.$emit('show',{current:this.pagination.current,pageSize});
        },
        handleCurrentChange(current){
            this.$emit("show",{current,pageSize:this.pagination.pageSize});
        }

    },
};
</script>

<style>
</style>